import React, { Component } from 'react'
import { View, TouchableOpacity } from 'react-native'
import FastImage from 'react-native-fast-image'
import PropTypes from 'prop-types'

import styles from '../styles/SliderEntry.style'

export default class SliderEntry extends Component {
  static propTypes = {
    data: PropTypes.object.isRequired,
    even: PropTypes.bool,
  }

  get image() {
    const {
      data: { pic, m_pic },
      borderRadius,
      itemWidth,
      itemHeight,
    } = this.props
    const isUrl = /^http|^\/\//.test(m_pic)

    return (
      <FastImage
        source={isUrl ? { uri: m_pic || pic } : m_pic}
        style={[
          styles.image,
          { borderRadius, width: itemWidth, height: itemHeight },
        ]}
      />
    )
  }

  render() {
    const { even, borderRadius, itemWidth, itemHeight, onPress } = this.props

    return (
      <TouchableOpacity
        onPress={() => {
          onPress && onPress(this.props.data.url)
        }}
        activeOpacity={1}
        style={{ width: itemWidth, height: itemHeight }}
      >
        <View
          style={[
            styles.imageContainer,
            even ? styles.imageContainerEven : { borderRadius },
          ]}
        >
          {this.image}
        </View>
      </TouchableOpacity>
    )
  }
}
